<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="handlerQuery"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="80px">
          <el-form-item label="操作模块">
            <el-input v-model="queryForm.operateModule" clearable />
          </el-form-item>
          <el-form-item label="操作人">
            <el-input v-model="queryForm.createUsername" clearable />
          </el-form-item>
          <el-form-item label="操作类别">
            <el-select v-model="queryForm.operateType" clearable style="width: 100%;" placeholder="请选择操作类别">
              <el-option
                v-for="(item, index) in operateTypeList"
                :key="index"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作状态">
            <el-select v-model="queryForm.operateStatus" clearable style="width: 100%;" placeholder="请选择操作状态">
              <el-option
                v-for="(item, index) in operateStatusList"
                :key="index"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理时间">
            <el-input
              v-model="queryForm.handleTime"
              oninput="value=value.replace(/[^\d]/g,'')"
              clearable
              placeholder="请输入处理时间"
              @blur="queryForm.handleTime = $event.target.value"
            >
              <el-select slot="prepend" v-model="queryForm.handleTimeOperator" style="width: 80px;">
                <el-option
                  v-for="(item, index) in operatorList"
                  :key="index"
                  :label="item.label"
                  :value="Number(item.code)"
                />
              </el-select>
              <div slot="append">
                毫秒
              </div>
            </el-input>
          </el-form-item>
          <el-form-item label="请求时间">
            <el-date-picker
              v-model="queryForm.createTime"
              style="width: 100%;"
              type="datetimerange"
              placeholder="选择时间"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 请求信息 -->
      <template #request="scope">
        <div>请求IP：{{ scope.row.ip }}</div>
        <div>请求方式：<el-tag :type="scope.row.requestWay === 'GET' ? '' : 'success'">{{ scope.row.requestWay }}</el-tag></div>
        <div>请求URL：<el-tag>{{ scope.row.requestUrl }}</el-tag></div>
      </template>
      <!-- 操作类别 -->
      <template #operateType="scope">
        <el-tag
          :type="formatType(scope.row.operateType)"
        >{{ scope.row.operateType }}</el-tag>
      </template>
      <!-- 请求时间 -->
      <template #time="scope">
        <div>请求开始时间：{{ scope.row.startTime | formatTime }}</div>
        <div>请求结束时间：{{ scope.row.endTime | formatTime }}</div>
        <div>处理时长：<el-tag>{{ scope.row.handleTime }}毫秒</el-tag></div>
      </template>
      <!-- 操作状态 #SUCCESS：成功，FAIL：失败 -->
      <template #operateStatus="scope">
        <template v-for="(item, index) in operateStatusList">
          <el-tag
            v-if="scope.row.operateStatus === item.code"
            :key="index"
            :type="scope.row.operateStatus === 'SUCCESS' ? 'success' : 'danger'"
          >{{ item.label }}</el-tag>
        </template>
      </template>
      <!-- 列表操作按钮 -->
      <template #operation="scope">
        <el-button
          v-throttle
          v-permission="'log:operation:log:detail'"
          :size="size"
          type="text"
          icon="el-icon-view"
          style="color: #67C23A;"
          @click.stop="handlerDetail(scope.row)"
        >详情</el-button>
        <br>
        <el-button
          v-throttle
          v-permission="'log:operation:log:del'"
          :size="size"
          type="text"
          icon="el-icon-delete"
          class="danger-btn"
          @click.stop="handlerDel(funs['del'], scope.row)"
        >删除</el-button>
      </template>
    </common-table>
    <!-- 详情组件 -->
    <detail ref="detail" :obj="{ operateStatusList, }" />
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
import Detail from './components/detail'
export default {
  name: 'OperationLog',
  components: {
    Detail
  },
  mixins: [mixin],
  data() {
    return {
      operateStatusList: [], // 操作状态 #SUCCESS：成功，FAIL：失败
      operateTypeList: [], // 操作类别
      operatorList: [], // 操作符
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'request',
          type: 'slot',
          slotType: 'request',
          width: '400',
          align: 'center',
          label: '请求信息'
        },
        {
          prop: 'operateModule',
          align: 'center',
          label: '操作模块'
        },
        {
          prop: 'operateType',
          align: 'center',
          type: 'slot',
          slotType: 'operateType',
          label: '操作类别'
        },
        {
          prop: 'time',
          width: '300',
          align: 'center',
          type: 'slot',
          slotType: 'time',
          label: '请求时间'
        },
        {
          prop: 'operateStatus',
          align: 'center',
          type: 'slot',
          slotType: 'operateStatus',
          label: '操作状态'
        },
        {
          prop: 'createUsername',
          align: 'center',
          label: '操作人'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          slotType: 'operation',
          align: 'center',
          fixed: 'right'
        }
      ],
      // 顶部表单按钮组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        icon: 'el-icon-download',
        handler: 'handlerExport',
        permission: 'export',
        btnType: 'info',
        float: 'left',
        text: '导出'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerDels',
        class: 'deleteBtn',
        permission: 'batch:del',
        text: '删除',
        float: 'left'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerClear',
        class: 'deleteBtn',
        permission: 'clear',
        text: '清空',
        float: 'left'
      },
      {
        type: 'button',
        handler: 'handlerAdvanced',
        class: 'refreshBtn',
        permission: 'page',
        advanced: true,
        float: 'right',
        text: '高级查询'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        permission: 'page',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        permission: 'page',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        bindValue: '',
        permission: 'page',
        float: 'right',
        label: 'keyword',
        handler: 'handlerQuery',
        placeholder: '输入关键字搜索'
      }
      ]
    }
  },
  async created() {
    // 通过全局方法取数据字典
    this.operateStatusList = await this.getDictInfo('operation_log_operate_status')
    this.operateTypeList = await this.getDictInfo('operation_log_operate_type')
    this.operatorList = await this.getDictInfo('dict_operator')
  },
  methods: {
    formatType(type) {
      const typeMap = {
        '查询': '',
        '登录': '',
        '创建': 'success',
        '编辑': 'success',
        '登出': 'danger',
        '删除': 'danger',
        '清空数据': 'danger',
        '强制下线': 'danger',
        '上传': 'warning',
        '下载': 'warning',
        '生成代码': 'warning',
        '导出': 'info',
        '导入': 'info',
        '未知': 'info',
        '执行定时任务': 'info',
        '恢复/暂停定时任务': 'info'
      }
      if (!(type in typeMap)) {
        return 'info'
      }
      return typeMap[type]
    },
    // 清空操作日志
    handlerClear() {
      this.$confirm('此操作将清空所有操作日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.funs['clear']().then(res => {
          this.$message.success('清空成功')
          this.getList()
        })
      }).catch(() => {

      })
    }
  }
}
</script>
